<template>
  <div class="login-container">
    <div class="login login-shadow" style="display: block; margin-top: -324.5px;" >
      <div class="title">
        <h4>重置密码</h4>
      </div>
      <div class="content">
        <el-form :model="ResetPasswordDataForm" :rules="rules" class="login-form">
          <el-row>
            <el-col :span="24">
              <el-form-item prop="phone_number">
                <el-input
                  v-model="ResetPasswordDataForm.phone_number"
                  prefix-icon="el-icon-user-solid"
                  size="medium"
                  clearable
                  placeholder="请输入您的电话号码"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item prop="password">
                <el-input
                  v-model="ResetPasswordDataForm.password"
                  show-password
                  prefix-icon="el-icon-key"
                  clearable
                  size="medium"
                  placeholder="请输入密码"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item prop="reset_password">
                <el-input
                  v-model="ResetPasswordDataForm.reset_password"
                  show-password
                  prefix-icon="el-icon-unlock"
                  size="medium"
                  placeholder="再次输入密码"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <router-link to="/login">
             <el-button type="primary" size="middle" style="margin-left: 130px">重置<i class="el-icon-upload el-icon--right"></i></el-button>
          </router-link>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  const initForm = {
    phone_number: '',
    register_number: '',
    password: '',
    reset_password: ''
  }
  export default {
    name: 'resetpassword',
    data () {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ResetPasswordDataForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        ResetPasswordDataForm: Object.assign({}, initForm),
        rules: {
          phone_number: [{ required: true,message: '请输入手机号码',trigger: 'blur'},
            {validator:function(rule,value,callback){
                if(/^1[34578]\d{9}$/.test(value) == false){
                  callback(new Error("请输入正确的手机号"));
                }else{
                  callback();
                }
              }, trigger: 'blur'}],
          password: [{required: true,message: '请输入密码',trigger: 'blur'},
            { min: 5,max: 25,message: '长度在 5 到 25个字符'},
            {pattern: /^(\w){5,25}$/, message: '只能输入5-25个字母、数字、下划线'}],
          reset_password: [{validator: validatePass, trigger: 'blur' }]
        }

      }
    }
    }
</script>

<style scoped>
  .login-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-size: 100px;
    background-repeat: repeat;
    min-height: 800px;
    min-width: 630px;
    background: url("../../assets/img/icon-login/login-background.png") ;
    z-index: 999;
  }
  .login {
    width: 450px;
    border: 1px solid #dadada;
    border-radius: 10px;
    top: 50%;
    left: 50%;
    background: linear-gradient(#fff,#f5f5f5);
    margin-left: -225px;
    position: absolute;
    box-shadow: 0 9px 30px -6px rgba(0,0,0,.2), 0 18px 20px -10px rgba(0,0,0,.04), 0 18px 20px -10px rgba(0,0,0,.04), 0 10px 20px -10px rgba(0,0,0,.04);
  }

  el-input {
    width: 300px;
    height: 36px;
    font-size: 14px;
    font-weight: 700;
    margin-left: 40px;
    color: #333;
    border: none;
    outline: none;
  }
  .title {
    position: relative;
    background-image: url("../../assets/img/global-logo11.jpg");
    background-size: 80px;
    background-position: top center;
    background-repeat: no-repeat;
    height: 92px;
    margin: 30px 0 50px;
    padding: 80px 0 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
  .login-container .login  .title h4 {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
    border-bottom: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    line-height: 1em;
    height: auto;
    color: #333;
    font-size: 30px;
    font-weight: 400;
  }
  .content {
    padding: 0 40px 22px;
  }
  .login-form {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }
</style>
